<template>
  <div :class="[ns.b()]" ref="tableWrapper" @click="handleWrapperClick">
    <div :class="ns.e('title')">
      <span
        v-if="showTitle"
        :class="ns.e('title-label')"
        :style="{ fontSize: titleFont }"
        >{{ title }}</span
      >
      <span v-if="explainShow && explainPosition == 'default'">{{
        explainText
      }}</span>
    </div>
    <MdTablePro
      :class="ns.e('table')"
      autoFill
      height="100%"
      :key="tableKey"
      :border="tableBorder"
      :headerCellStyle="headerCellStyle"
      :cell-style="cellStyle"
      :rowClassName="rowClassName"
      rowKey="id"
      :columns="tableColumns"
      :stripe="tableStripe"
      :pagination="pagination"
      :onFetch="handleFetch"
      :row-height="rowHeight"
      ref="tableRef"
      :showPagination="false"
      @cellClick="handleClick"
    >
    </MdTablePro>
    <div :class="ns.e('footer')">
      <span v-if="explainShow && explainPosition == 'left'">{{
        explainText
      }}</span>
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick, reactive, onMounted, toValue } from 'vue';
import { MdTablePro } from '@mdfe/medi-ui-pro';
import { useNamespace } from '@mdfe/medi-ui';
import useTable from './useTable.js';

defineOptions({
  name: 'mic-simple-table-block',
  components: { MdTablePro },
});

const ns = useNamespace('table-pane');

const props = defineProps({
  isComp: {
    type: Boolean,
    default: false,
  },
  widget: Object,
});

const emit = defineEmits(['set', 'click']);

const tableColumns = ref([{}]);
const headerCellStyle = reactive({});
const cellStyle = reactive({});
const tableBorder = ref(true);
const tableStripe = ref(false);
const tableOverflow = ref(false);
const columnsFixed = ref(0);
const rowClassName = ref('');
const tableKey = ref(1);
const rowHeight = ref(undefined);
const pagination = ref(undefined);
const searchCallback = ref(undefined);
const tableWrapper = ref();
const tableRef = ref();

const title = ref('表格');
const titleFont = ref('14');
const showTitle = ref(true);

const explainShow = ref(true);
const explainPosition = ref('default');
const explainText = ref('');

const xuanZhongZDList = ref([]);

const { dataTable, getTableData, handleFetch } = useTable('SimpleTablePane');

function handleClick(row, column, cell, event) {
  console.log(row, column, cell, event);
}

function handleWrapperClick(event) {
  emit('click', event);
}
function setOption(options) {
  const {
    theme,
    tableFixed,
    tableHeaderFont,
    tableFont,
    overflowTable,
    commonShowTitle,
    commonTitleName,
    commonTitleFont,
    commonExplainShow,
    commonExplainPosition,
    commonExplainText,
  } = options || {};

  showTitle.value = commonShowTitle;
  title.value = commonTitleName;
  titleFont.value = commonTitleFont + 'px';
  explainShow.value = commonExplainShow;
  explainPosition.value = commonExplainPosition;
  explainText.value = commonExplainText;

  headerCellStyle.backgroundColor = theme[0];
  headerCellStyle.fontSize = tableHeaderFont + 'px';
  cellStyle.fontSize = tableFont + 'px';
  tableBorder.value = options.tableBorder;
  tableStripe.value = options.tableStripe;
  if (tableFixed.check) {
    columnsFixed.value = tableFixed.count;
  }
  tableOverflow.value = overflowTable;

  if (searchCallback.value) {
    nextTick(() => {
      searchCallback.value();
    });
  }
}

function setColumns() {
  const columns = [];
  xuanZhongZDList.value.forEach((item) => {
    columns.push({
      prop: item.ziDuanMC,
      label: item.ziDuanMC,
      minWidth: '120px',
      align: item.ziDuanLX == 2 ? 'right' : 'left',
    });
  });
  console.log(columns);
  tableColumns.value = columns;
}

async function search(id, widget) {
  xuanZhongZDList.value = toValue(widget?.xuanZhongZDList) || [];
  console.log(xuanZhongZDList.value, widget);
  setColumns();
  const { data, fieldList } = await getTableData(id, widget);
  if (!data) return;
  const list = [];
  const indexList = [];
  xuanZhongZDList.value.forEach((item) => {
    const index = fieldList.findIndex(
      (field) => field.ziDuanMC == item.ziDuanMC,
    );
    indexList.push(index);
  });
  data.forEach((item) => {
    const obj = {};
    tableColumns.value.forEach((element, index) => {
      obj[element.prop] = item[indexList[index]];
    });
    list.push(obj);
  });
  dataTable.value = list;
  tableRef.value.search();
}

onMounted(() => {
  emit('set', true);
  if (props.isComp) {
    search(props.widget.gongChengSJJID, props.widget);
  }
});

defineExpose({
  setOption,
  search,
  setColumns,
  widget: props.widget,
});
</script>

<style lang="scss" scoped>
@include c('table-pane') {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  @include e('table') {
    width: 100%;
    box-sizing: border-box;
  }

  @include e('title') {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: var(--md-spacing-2);
  }
  @include e('title-label') {
    color: #222;
    font-size: var(--md-font-3);
  }
}
</style>
